<template>
  <div class="magicCube">
    <!--预览区-->
    <div class="previewStyle">
      <!-- 一行二个 -->
      <div v-show="formData.indicator == 1" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-one" :style="this.LayoutArr[0].url !== undefined?{height: 'auto'}:{height: '150px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" />
            <div v-else>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 一行三个 -->
      <div v-show="formData.indicator == 2" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-two" :style="this.LayoutArr[0].url !== undefined?{height: 'auto'}:{height: '105px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" />
            <div v-else>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 一行四个 -->
      <div v-show="formData.indicator == 3" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-three" :style="this.LayoutArr[0].url !== undefined?{height: 'auto'}:{height: '85px'}">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" />
            <div v-else>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 二左二右 -->
      <div v-show="formData.indicator == 4" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-four">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',padding: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" />
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <!-- 一左二右 -->
      <div v-show="formData.indicator == 5" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-five">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',padding: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" style="width:auto;height: 100%;" />
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <!-- 一上二下 -->
      <div v-show="formData.indicator == 6" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-five imgLayout-six">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" />
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <!-- 一左三右 -->
      <div v-show="formData.indicator == 7" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="layout-cont imgLayout-five imgLayout-seven">
          <div v-for="(item,index) in LayoutArr" :key="index" :style="{borderRadius:formData.cornerBorder/2 + 'px',paddingLeft: formData.imageMargin/4 + 'px', paddingRight: formData.imageMargin/4 + 'px'}">
            <el-image v-if="item.url" :src="item.url" />
            <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
          </div>
        </div>
      </div>
      <div v-show="formData.indicator == 8" :style="{paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px',paddingLeft:formData.pageMargin/2 + 'px',paddingRight:formData.pageMargin/2 + 'px'}">
        <div class="decorate-cube">
          <div
            v-for="(item, index) in selectedList"
            :key="'selected-'+index"
            class="cube-selected"
            :style="{'width':getSelectedWidth(item)+'px','height':getSelectedHeight(item)+'px','top':getSelectedTop(item)+'px','left':getSelectedLeft(item)+'px',borderRadius:formData.cornerBorder/2 + 'px',padding: formData.imageMargin/4 + 'px'}"
            :class="{'cube-selected-click': activeIndex == index}"
            @mouseenter="onEnterSelected(index)"
            @click="cubeClick(index)"
          >
            <el-image v-if="item.url" :src="item.url" fit="cover" :style="{'width':(getSelectedWidth(item) - formData.imageMargin/2)+'px','height':(getSelectedHeight(item) - formData.imageMargin/2)+'px'}"/>
            <div v-else class="cube-selected-text">
              {{ Math.round(750/density*((parseInt(item.end.x) - parseInt(item.start.x) + 1))) }}
              x
              {{ Math.round(750/density*((parseInt(item.end.y) - parseInt(item.start.y) + 1))) }}
              像素
            </div>
          </div>
        </div>
      </div>

    </div>
    <!--编辑区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">组合图片</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator" @change="radioChange">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>

            </el-radio-group>
          </div>
          <el-tabs v-model="settingActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="styleWrap">
                <div class="titleStyle">图片布局</div>
                <div class="contentStyle">
                  <!-- 一行二个 -->
                  <div v-show="formData.indicator == 1">
                    <div class="imgLayout layout-cont imgLayout-one imgLayout-border" :style="this.LayoutArr[0].url !== undefined?{height: 'auto'}:{height: '150px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" />
                        <div v-else>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一行三个 -->
                  <div v-show="formData.indicator == 2">
                    <div class="imgLayout layout-cont imgLayout-two imgLayout-border" :style="this.LayoutArr[0].url !== undefined?{height: 'auto'}:{height: '105px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" />
                        <div v-else>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一行四个 -->
                  <div v-show="formData.indicator == 3">
                    <div class="imgLayout layout-cont imgLayout-three imgLayout-border" :style="this.LayoutArr[0].url !== undefined?{height: 'auto'}:{height: '85px'}">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" />
                        <div v-else>{{ item.name }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 二左二右 -->
                  <div v-show="formData.indicator == 4">
                    <div class="imgLayout layout-cont imgLayout-four imgLayout-border">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" />
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一左二右 -->
                  <div v-show="formData.indicator == 5">
                    <div class="imgLayout layout-cont imgLayout-five imgLayout-border">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" style="width:auto;height: 100%;" />
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一上二下 -->
                  <div v-show="formData.indicator == 6">
                    <div class="imgLayout layout-cont imgLayout-five imgLayout-six imgLayout-border">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" />
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 一左三右 -->
                  <div v-show="formData.indicator == 7">
                    <div class="imgLayout layout-cont imgLayout-five imgLayout-seven imgLayout-border">
                      <div v-for="(item,index) in LayoutArr" :key="index" :class="{active : active == index}" @click="imgLayoutClick(index)">
                        <el-image v-if="item.url" :src="item.url" />
                        <div v-else>{{ item.name }}<br>{{ item.nameOr }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- 自定义 -->
                  <div v-show="formData.indicator == 8" class="imgLayout">
                    <div class="decorate-select">
                      图片布局：
                      <el-select v-model="density" placeholder="请选择" @change="onChangeDensity">
                        <el-option v-for="item in densityList" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                    <div class="decorate-cube">
                      <ul v-for="(n,index) in densityNum" :key="index" class="cube-col">
                        <li
                          v-for="(i,index) in densityNum"
                          :key="index"
                          :class="['cube-item', {'item-selecting': isSelecting(n,i), 'item-selected':isSelected(n,i)}]"
                          :style="{'width':cubeCellWidth+'px','height':cubeCellHeight+'px'}"
                          :data-x="n"
                          :data-y="i"
                          @click="onClickCubeItem($event)"
                          @mouseenter="onEnterCubeItem($event)"
                        >
                          <span class="plus-icon" :style="{'lineHeight':cubeCellHeight+'px'}">+</span>
                        </li>
                      </ul>

                      <div
                        v-for="(item, index) in selectedList"
                        :key="'selected-'+index"
                        class="cube-selected"
                        :style="{'width':getSelectedWidth(item)+'px','height':getSelectedHeight(item)+'px','top':getSelectedTop(item)+'px','left':getSelectedLeft(item)+'px'}"
                        :class="{'cube-selected-click': activeIndex == index}"
                        @mouseenter="onEnterSelected(index)"
                        @click="cubeClick(index)"
                      >
                        <el-image v-if="item.url" :src="item.url" fit="cover" :style="{'width':getSelectedWidth(item)+'px','height':getSelectedHeight(item)+'px'}" />
                        <div v-else class="cube-selected-text">
                          {{ Math.round(750/density*((parseInt(item.end.x) - parseInt(item.start.x) + 1))) }}
                          x
                          {{ Math.round(750/density*((parseInt(item.end.y) - parseInt(item.start.y) + 1))) }}
                          像素
                        </div>
                        <i class="el-icon-error" @click="closeClick(index)" />
                      </div>

                    </div>
                  </div>
                  <div v-show="this.formData.indicator !== 8" class="imgLayout">
                    <div v-for="(item,index) in LayoutArr" v-show="active == index" :key="index" class="ad-image-main">
                      <div class="main-image">
                        <div v-if="!item.url" class="main-image-add" @click="addImgClick(index,1)">
                          <span>+</span>
                          <div>添加图片</div>
                        </div>
                        <div v-else class="main-image-url">
                          <el-image :src="item.url" />
                          <div class="main-image-revise" @click="reviseImgClick(index,1)">更换图片</div>
                        </div>

                      </div>
                      <div class="main-content">
                        <div class="ad-image-title">
                          <span>图片标题：</span>
                          <el-input v-model="item.title" size="mini" placeholder="输入标题" @change="titleChange(index)" />
                        </div>
                        <div class="ad-image-title">
                          <span>跳转路径：</span>
                          <div v-if="item.type >= 0&&item.microType&&item.microTitle" class="dis al_item">
                            <span class="typeName">{{ item.microType }}</span>
                            <span class="microTitle">{{ item.microTitle }}</span>
                            <span class="cursor modifyBtn microTitle" @click="choosePageClick(index,1)">修改</span>
                          </div>
                          <div v-else class="cursor modifyBtn" @click="choosePageClick(index,1)">请选择跳转到的页面</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-show="this.formData.indicator === 8" class="imgLayout">
                    <div v-for="(item,index) in selectedList" v-show="activeIndex == index" :key="index" class="ad-image-main">
                      <div class="main-image">
                        <div v-if="!item.url" class="main-image-add" @click="addImgClick(index,2)">
                          <span>+</span>
                          <div>添加图片</div>
                        </div>
                        <div v-else class="main-image-url">
                          <el-image :src="item.url" />
                          <div class="main-image-revise" @click="reviseImgClick(index,2)">更换图片</div>
                        </div>

                      </div>
                      <div class="main-content">
                        <div class="ad-image-title">
                          <span>图片标题：</span>
                          <el-input v-model="item.title" size="mini" placeholder="输入标题" />
                        </div>
                        <div class="ad-image-title">
                          <span>跳转路径：</span>
                          <div v-if="item.type >= 0&&item.microType&&item.microTitle" class="dis al_item">
                            <span class="typeName">{{ item.microType }}</span>
                            <span class="microTitle">{{ item.microTitle }}</span>
                            <span class="cursor modifyBtn microTitle" @click="choosePageClick(index,2)">修改</span>
                          </div>
                          <div v-else class="cursor modifyBtn" @click="choosePageClick(index,2)">请选择跳转到的页面</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>边角样式</div>
                    <el-radio-group v-model="formData.cornerBorder" size="small">
                      <el-radio-button label="0">直角</el-radio-button>
                      <el-radio-button label="10">圆角</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>图片间距</div>
                    <el-radio-group v-model="formData.imageMargin" size="small">
                      <el-radio-button :label="0">无</el-radio-button>
                      <el-radio-button :label="10">有</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.pageMargin }}px</span>
                  </div>
                  <el-radio-group v-model="formData.pageMargin" size="small">
                    <el-radio-button label="0">无</el-radio-button>
                    <el-radio-button label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>

    <chooseImages
      ref="pics"
      :can-choose-images-num="canChooseImagesNum"
      :max="canChooseImagesNum"
      @chooseImagesEnd="chooseImagesEnd"
      @getUrl="getPicsUrl"
    />
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="已上架商品"
      :visible.sync="dialogChooseGoods"
      width="70%"
    >
      <div class="dialog-content">
        <chooseGoods :is-get-choose-data="isGetChooseData" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--选择微页面-->
    <div id="dialog">
      <el-dialog
        custom-class="up-dialog"
        :close-on-click-modal="false"
        :modal="false"
        top="5vh"
        title="页面选择"
        :visible.sync="dialogChoosePages"
        width="55%"
      >

        <choose-feature
          :is-get-choose-data="isGetChooseFeature"
          @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
        />
        <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>

      </el-dialog>
    </div>

  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
